<template>
  <div ref="container"></div>

  <div style="height: 100px;
  width: 100px;background: #000;"></div>


</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import * as THREE from 'three';
  import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
  import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry';
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

  const container = ref(null);

  onMounted(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.value.appendChild(renderer.domElement);

    // 设置背景色为红色
    renderer.setClearColor(0xff0000, 0);

    // 添加轨道控制
    const controls = new OrbitControls(camera, renderer.domElement);

    // 添加光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambientLight);

    const pointLight1 = new THREE.PointLight(0xffffff, 1);
    pointLight1.position.set(50, 50, 50);
    scene.add(pointLight1);

    const pointLight2 = new THREE.PointLight(0xffffff, 0.7);
    pointLight2.position.set(-50, -50, -50);
    scene.add(pointLight2);

    const loader = new FontLoader();
    let textMesh = null;
    let animationProgress = 0; // 动画进度，范围为 [0, 1]
    const animationDuration = 1.8; // 动画持续时间（秒）
    const startY = -100; // 起始位置
    const targetY = 50; // 最终位置
    const textSize = Math.min(window.innerWidth, window.innerHeight) / 14; // 根据窗口大小调整字体大小

    loader.load('/fonts/YouSheBiaoTiHei_Regular.json', (font) => {
      const geometry = new TextGeometry('2025 新年快乐！', {
        font: font,
        size: textSize,
        height: 1,  // 减少字体深度
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.3,  // 较薄的棱角厚度
        bevelSize: 0.1,      // 较小的棱角大小
        bevelOffset: 0,
        bevelSegments: 2,
      });

      const material = new THREE.MeshStandardMaterial({
        color: 0xffff00,
        roughness: 0.6,
        metalness: 0.2,
        emissive: 0xffcc00,
        transparent: true,
        opacity: 1,
      });

      textMesh = new THREE.Mesh(geometry, material);

      // 计算文本边界框，并将其水平居中
      geometry.computeBoundingBox();
      const boundingBox = geometry.boundingBox;
      const centerX = -0.5 * (boundingBox.max.x - boundingBox.min.x);
      textMesh.position.set(centerX, startY, 0);

      scene.add(textMesh);
    });
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      camera.position.z = 500 * (window.innerWidth / 1920);
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
    camera.position.set(0, 0, 500);

    function animate() {
      requestAnimationFrame(animate);

      if (textMesh && animationProgress < 1) {
        // 计算动画进度
        animationProgress += 1 / (60 * animationDuration); // 假设每秒 60 帧
        if (animationProgress > 1) animationProgress = 1;

        // 更新文字位置和透明度
        const easedProgress = easeOutCubic(animationProgress); // 使用缓动效果
        textMesh.position.y = startY + (targetY - startY) * easedProgress;
        textMesh.material.opacity = easedProgress;
      }

      controls.update();
      renderer.render(scene, camera);
    }

    animate();

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });

    // 缓动函数（缓出效果）
    function easeOutCubic(t) {
      return 1 - Math.pow(1 - t, 3);
    }
  });
</script>

<style>
  div {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>